import { FC, useState } from "react";

interface Props {}
const Index: FC<Props> = () => {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const onUpdateFormData = (e: React.ChangeEvent<HTMLInputElement>) => {
    // const data:number = 1
    // const obj:object = {a:1,b:2}
    // const obj:{a:number,b:number} = {a:1,b:2}
    // const obj: {
    //   a: number;
    //   b: number;
    //   username?: string;
    //   password?: string;
    // } = { a: 1, b: 2, [e.target.name]: e.target.value };

    // setFormData{{username: '数据'}}
    // setFormData{{password: '数据'}}
    // setFormData{{username: '数据', password: '数据'}}
    setFormData({
      ...formData, // 老数据 username , password

      // username or password
      [e.target.name]: e.target.value,
    } as { username: string; password: string });
  };

  const onSubmit = () => {
    console.log("打印表单数据：", formData);
  };
  return (
    <fieldset>
      <legend>04-函数组件受控组件</legend>
      用户名
      <input
        type="text"
        value={formData.username}
        onChange={onUpdateFormData}
        name="username"
      />
      密码
      <input
        type="text"
        value={formData.password}
        onChange={onUpdateFormData}
        name="password"
      />
      <button onClick={onSubmit}>打印数据</button>
    </fieldset>
  );
};

export default Index;
